<template>
  <el-dialog
    v-model="dialogVisible"
    v-bind="options"
    class="invoice-dialog"
    @close="cancelFn"
  >
    <template #header>
      <div class="my-header" v-if="options.tabsShow">
        <el-tabs v-model="activeName">
          <el-tab-pane
            v-for="(item, index) in tabsList"
            :key="index"
            :label="item.label"
            :name="item.name"
          >
            <!-- <template #label>
              <span class="text-2xl">
                <span>{{ item.label }}</span>
              </span>
            </template> -->
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
    <!-- <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="(item, index) in tabsList"
        :key="index"
        :label="item.label"
        :name="item.name"
      />
      <div>
        <component :is="components[activeName]" :invoiceData="formData" />
      </div>
    </el-tabs> -->
    <div class="pt-6">
      <component
        :is="components[activeName]"
        :invoiceData="invoiceOptions"
        v-bind="componentData"
        @selectionChange="selectionChange"
      />
    </div>
    <template #footer v-if="props.dialogData.isSelection">
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogBtnOk" :disabled="okDis"
          >确定</el-button
        >
        <el-button @click="cancelFn"> 取消 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup name="InvoiceDialog">
import { reactive, toRefs, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import InvoiceManage from '@/views/financialManage/invoiceManage/index'
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
const props = defineProps({
  dialogData: {
    required: true,
    type: Object || Array,
    default: () => {
      return {
        open: false,
        isSelection: false,
        options: {},
        query: {}
      }
    }
  }
})
const emit = defineEmits(['getData', 'update:modelValue'])
const dialogVisible = ref(false)
const activeName = ref('InvoiceManage')
const components = shallowRef({
  InvoiceManage
})
const data = reactive({
  options: {
    width: '60%',
    title: '发票选择',
    closeOnClickModal: false,
    destroyOnClose: true,
    tabsShow: true
  },
  tabsList: [
    {
      label: '发票选择',
      name: 'InvoiceManage',
      data: computed(() => {
        return {
          query: props.dialogData.query
        }
      })
    }
  ],
  dialogVal: [],
  invoiceOptions: {
    isDialog: true,
    dialogType: props.dialogData.dialogType,
    isSelection: props.dialogData.isSelection
  },
  okDis: false,
  componentData: {}
})
const { options, tabsList, dialogVal, invoiceOptions, okDis, componentData } =
  toRefs(data)
onMounted(() => {
  componentData.value = computed(() => {
    let val = tabsList.value.filter(e => {
      return e.name == activeName.value
    })
    return val[0].data
  })
})
// watchEffect(() => {
//   // dialogVisible.value = props.dialogData.open
//   options.value = { ...options.value, ...props.dialogData.options }
//   invoiceOptions.value.dialogType = props.dialogData.dialogType
// })
watch(
  () => props.dialogData.open,
  () => {
    if (props.dialogData.open) {
      options.value = { ...options.value, ...props.dialogData.options }
      invoiceOptions.value.dialogType = props.dialogData.dialogType
      invoiceOptions.value.isSelection = props.dialogData.isSelection
      invoiceOptions.value.multiple = props.dialogData.multiple
    }
  },
  {
    // flush: 'post'
    immediate: true,
    deep: true
  }
)

function selectionChange(val) {
  if (props.dialogData?.multiple) {
    dialogVal.value = val
  } else {
    dialogVal.value = [val[0]]
  }
}
function dialogBtnOk() {
  okDis.value = true
  emit('getData', dialogVal.value, activeName.value)
  okDis.value = false
  if (dialogVal.value.length > 0) {
    cancelFn()
  }
}
// 取消
function cancelFn() {
  dialogVal.value = []
  emit('update:modelValue', false)
}
</script>
<style lang="scss">
.invoice-dialog .el-dialog__body {
  padding-top: 0;
}
.invoice-dialog {
  overflow: hidden;
  .el-tabs__item {
    padding: 0 10px;
    font-size: 16px;
    font-weight: bold;
    height: 54px;
    line-height: 54px;
  }
  .el-tabs__header {
    margin: 0;
  }
  .el-dialog__header {
    padding-top: 0;
    padding-bottom: 0;
    background-color: #f0f0f0;
    margin: 0;
    .el-dialog__title {
      @apply py-5 inline-block;
    }
  }
}
</style>
